<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网——学问有余，可为人师</title>

<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/jCrop.css" rel="stylesheet">
<link href="../css/non-responsive.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/groupCreate.css" rel="stylesheet">    
<link href="../ico/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"/>
<style>
.previewwDiv{
	width:100px;
	height:100px;
	overflow:hidden;
	margin-top:30px;
	margin-left:20px;
}
</style>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap.js"></script>
<script src="../js/jCrop.js"></script>
<script src="../js/logout.js"></script>
</head>
<body>
	{% include 'public/common/header.html' %}
	<div class="container" style="margin-top:45px">
		<div class="row">
<!-- left div -->
			<div class="col-xs-8">
				<div>
					<div class="publisher_img pull-left">
						<img src="{{info.domain}}/{{info.img}}-mzchange" width="100%" class="img-circle"/>
					</div>
					<div class="publisher_name pull-left">
						<div>{{info.user_name}}</div>
						<div class="publisher_sign"><i>{{info.sign}}</i></div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div>
					<div class="topdirection"></div>
					<div class="group_mes">
					<form action="{% url 'groups:groupcreate' %}" method="post" enctype="multipart/form-data" id="form">
						{% csrf_token %}
						<div class="group_form_all">
							<div class="group_form_name pull-left"><b>小组名</b></div>
							<div class="group_form pull-left"><input type="text" id="groupName" name="groupName" maxlength="8"></div>
							<div class="clearfix"></div>
						</div>
						<div class="group_form_all">
							<div class="group_form_name pull-left"><b>小组图片</b></div>
							<div class="group_form pull-left"><input type="file" id="picture" name="groupImg"></div>
							<div class="clearfix"></div>
						</div>
						<input class="form-control" type="hidden" name="coordinate" id="hidden" />
						<div class="group_form_all" id="cutimg" style="display:none;">
<!-- js cutimg begin -->
							<div id="show_cut" class="cutImgDiv">
								<div id="haha" class="pull-left" style="width:330px;overflow:hidden;">
									
								</div>
								<div class="pull-left previewwDiv" id="heihei">
									
								</div>
								<div class="clearfix"></div>
							</div>
<!-- js cutimg end -->
						</div>
						<div class="group_form_all">
							<div class="group_form_name pull-left"><b>小组介绍</b></div>
							<div class="group_form pull-left"><textarea class="group_textarea" name="groupIntro" id="groupIntro"></textarea></div>
							<div class="clearfix"></div>
						</div>
						<div class="group_form_all">
<!-- 标签设置  -->	
							<div class="right case4" id="case4">
								<div>
									<!--<div class="group_form_name pull-left">相关分类</div>
									<div class="group_form pull-left"><input id="textvalue" type="text" name=""></div>
									<div class="clearfix"></div>
									<div>
										<dl class="tags" style="margin-left:50px;">
 循环显示分类标签 开始处 
											<dd class="typeLabel12" onclick="typeLabels(2);" style="float:left;margin-top:10px;margin-left:5px;margin-right:5px;padding-top:2px;padding-bottom:2px;padding-left:8px;padding-right:8px;">
												<a href="javascript:void(0)">  分类1</a>
											</dd>
 循环显示分类标签 结束处 		
											<div class="clearfix"></div>						
										</dl>
									</div>-->
									
									<div class="subbox">
										<input id="subbox" type="checkbox" onclick="sub()" checked>我已阅读并同意<a href="{% url 'users:agreement' 2 %}" target="_blank">麦知网小组协议</a>
									</div>
									<div>
										<div style="text-align:center;"><button id="subbutton3" type="button" onclick="refer()" class="btn btn-info">提交申请</button></div>
									</div>
								</div>
							</div>
<!-- 标签设置 结束处 -->

						</div>
					</form>
					</div>
				</div>
			</div>

<!-- right div -->
			<div class="col-xs-4">
				<div class="agreement">
					<pre>
麦知小组的指导原则:

1. 小组为组长全权拥有和管理, 小组成员不接受可以退出后另立相同话题的小组；
2. 小组管理员有责任和义务及时删除麦知不欢迎、不允许的内容；
3. 小组内部之间的争执由小组成员和小组管理员协商解决，麦知工作人员不参与处理此类事项；
4. 麦知不允许的内容以及小组之间的争执麦知工作人员有责权介入。
					</pre>
				</div>
			</div>
		</div>
	</div>
		
	<script type="text/javascript">
//没用
	function change_list(a)
	{
		$("#case1").css("display","none");
		$("#case2").css("display","none");
		$("#case3").css("display","none");
		$("#case4").css("display","none");
		$("#a1").attr("class","list-group-item");
		$("#a2").attr("class","list-group-item");
		$("#a3").attr("class","list-group-item");
		$("#a4").attr("class","list-group-item");
		$("#case"+a).css("display","block");
		$("#a"+a).attr("class","active list-group-item");
	}




	jQuery(function($){
		// Create variables (in this scope) to hold the API and image size
		var jcrop_api,boundx,boundy;
		//裁剪图片
		$("#targett").Jcrop({
			setSelect:[0,0,100,100],//显示盖板DIV，控制盖板大小
			onChange:updatePreview,
			onSelect:updatePreview,
			aspectRatio:1//选框宽高比。说明：width/height
		},function(){
			// Use the API to get the real image size
			var bounds=this.getBounds();
			boundx=bounds[0];
			boundy=bounds[1];
			// Store the API in the jcrop_api variable
			jcrop_api=this;
		});
		
		function updatePreview(c){
			if(parseInt(c.w)>0){
				var rx=100/c.w;
				var ry=100/c.h;
				
				$("#previeww").css({
					width:Math.round(rx*boundx)+"px",
					height:Math.round(ry*boundy)+"px",
					marginLeft:"-"+Math.round(rx*c.x)+"px",
					marginTop:"-"+Math.round(ry*c.y)+"px"
				});
			}
		}
	});

//没用
	function huihui()
	{
		var upDiv=$(".jcrop-tracker");
		var img=$("#haha");
		alert(upDiv.offset().left+"-----"+upDiv.offset().top+"--------"+upDiv.width()+"-------"+upDiv.height());
		alert(img.offset().left+"-----"+img.offset().top+"--------"+img.width()+"-------"+img.height());
	}
			

//没用
	function change_list(a)
	{
		$("#case1").css("display","none");
		$("#case2").css("display","none");
		$("#case3").css("display","none");
		$("#case4").css("display","none");
		$("#a1").attr("class","list-group-item");
		$("#a2").attr("class","list-group-item");
		$("#a3").attr("class","list-group-item");
		$("#a4").attr("class","list-group-item");
		$("#case"+a).css("display","block");
		$("#a"+a).attr("class","active list-group-item");
	}



//没用
	function typeLabels(a)
	{
		var textvalue=$("#textvalue").val();
		$(".typeLabel3"+a).attr("class","typeLabel1"+a);
		var typeLabel1=$(".typeLabel1"+a);
		var typeLabel2=$(".typeLabel2"+a);
		typeLabel1.css("background-color","#D0D1E6");
		typeLabel2.css("background-color","#FAFAFA");
		typeLabel2.attr("class","typeLabel3"+a);
		typeLabel1.attr("class","typeLabel2"+a);
	//第一次点击 加上这个分类名
		if($('.typeLabel2'+a+'>a').html())
		{
			$("#textvalue").val(textvalue+$('.typeLabel2'+a+'>a').html());
		}
	//第二次点击 减去这个分类名
		if($('.typeLabel3'+a+'>a').html())
		{
			var strPosition=textvalue.indexOf($('.typeLabel3'+a+'>a').html());
			var textNew1=textvalue.substr(0,strPosition);
			var textNew2=textvalue.substr(strPosition+$('.typeLabel3'+a+'>a').html().length,textvalue.length);
			//var textjiechu=textvalue.substr(strPosition,strPosition+$('.typeLabel3'+a+'>#a').html().length);
			var textNew=textNew1+textNew2;
			$("#textvalue").val(textNew);
		}
	}

//js filereader
function handleFileSelect(evt) {
	document.getElementById('cutimg').style.display='block';
	var files = evt.target.files; // FileList object
	// Loop through the FileList and render image files as thumbnails.
	for (var i = 0, f; f = files[i]; i++) {

	  // Only process image files.
	  if (!f.type.match('image.*')) {
	    continue;
	  }

	  var reader = new FileReader();

	  // Closure to capture the file information.
	  reader.onload = (function(theFile) {
	    return function(e) {
	      // Render thumbnail.
	      var haha=document.getElementById('haha');
	      var heihei=document.getElementById('heihei');
	      //var span = document.createElement('span');
	      haha.innerHTML = ['<img name="img1" id="targett" width="330px" src="', e.target.result,
	                        '" title="', escape(theFile.name), '"/>'].join('');
	      heihei.innerHTML = ['<img name="img2" id="previeww" src="', e.target.result,
	                        '" title="', escape(theFile.name), '"/>'].join('');
	      //document.getElementById('haha').insertBefore(span, null);
	      imgs=escape(e.target.result);
	      abc();
	      //var urls=document.images.item(img1).src;
	    };
	  })(f);
	  // Read in the image file as a data URL.
	  reader.readAsDataURL(f);
	}
}

document.getElementById('picture').addEventListener('change', handleFileSelect, false);
//截图时生成小图片
function abc(){
	// Create variables (in this scope) to hold the API and image size
	var jcrop_api,boundx,boundy;
	
	$("#targett").Jcrop({
		setSelect:[0,0,100,100],//显示盖板DIV，控制盖板大小
		onChange:updatePreview,
		onSelect:updatePreview,
		aspectRatio:1//选框宽高比。说明：width/height
	},function(){
		// Use the API to get the real image size
		var bounds=this.getBounds();
		boundx=bounds[0];
		boundy=bounds[1];
		// Store the API in the jcrop_api variable
		jcrop_api=this;
	});
	
	function updatePreview(c){
		if(parseInt(c.w)>0){
			var rx=100/c.w;
			var ry=100/c.h;
			
			$("#previeww").css({
				width:Math.round(rx*boundx)+"px",
				height:Math.round(ry*boundy)+"px",
				marginLeft:"-"+Math.round(rx*c.x)+"px",
				marginTop:"-"+Math.round(ry*c.y)+"px"
			});
		}
	}
}

//提交小组信息
function refer(){
	var picture=document.getElementById('picture').value;
	var groupIntro=document.getElementById('groupIntro').value;
	var groupName=document.getElementById('groupName').value;
	if(groupName=='') {
		alert('小组名不能为空');		
		return ;
	} if(picture=='') {
		alert('请上传图片');		
		return ;
	} if(groupIntro=='') {
		alert('请填写小组介绍');		

	} else {
		var upDiv=$(".jcrop-tracker");
		var img=$("#haha");
		var x0=upDiv.offset().left-img.offset().left;
		var x1=upDiv.offset().top-img.offset().top;
		var y0=x0+upDiv.width();
		var y1=x1+upDiv.height();
		document.getElementById('hidden').value=x0+"*"+x1+"*"+y0+"*"+y1;
		var form = document.getElementById('form');  
	    	form.submit(); 
	    }
}

//同意协议
function sub(){
	$("#subbutton3").attr("id","subbutton1");
	$("#subbutton2").removeAttr("disabled");
	$("#subbutton1").attr("disabled","disabled");
	$("#subbutton2").attr("id","subbutton3");
	$("#subbutton1").attr("id","subbutton2");
}
</script>	

		
</body>
</html>